<template>
	<view class="container">
		<view class="cropper-wrap">
			<image-cropper id="image-cropper" :zoom="0" :minZoom="0" cutWidth="80%" :keepRatio="true" cutHeight="100rpx"
				:angle="0" :src="src" canvasBackground="red" @cropped="cropped" @afterDraw="afterDraw"
				@beforeDraw="beforeDraw" />
		</view>
		<button @tap="btnClick">上传图片</button>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />
	</view>
</template>

<script>
	import cpimg from "@/components/cpimg/cpimg.vue"
	import ImageCropper from '@/components/uniapp-nice-cropper/cropper.vue'
	export default {
		components: {
			ImageCropper,
			cpimg
		},
		data() {
			return {
				src: '',
				tailoringImg: '',
				networkImg: '',
				flag: true
			}
		},
		onLoad(e) {
			console.log(e.img, '接收照片');
			this.src = e.img
		},
		methods: {
			btnClick() {
				if(this.flag){
					this.flag = false
					this.selectImg()
				}else{
					this.$showToast('正在提交中,请勿连点...')
					setTimeout(()=>{
						this.flag = true
					},10000)
				}
			},
			selectImg() {
				var that = this;
				// that.$refs.cpimg._changImg();
				uni.uploadFile({
					url: that.$fileImg + '/upload/upload',
					filePath: that.tailoringImg,
					name: 'file',
					formData: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						let dataPath = JSON.parse(res.data)
						if (dataPath.code == 1) {
							that.$request.request({
								url: '/Outuser/get_pic_num',
								method: 'POST',
								data: {
									path: dataPath.data.imgurl.intact_url,
									token: uni.getStorageSync('token')
								}
							}).then(resolt => {
								uni.showToast({
									title: resolt.data.msg,
									icon: 'none'
								})
								let num = null;
								if (resolt.data.code == 1) {
									num = resolt.data.data
								}else{
									num = ''
								}
								let obj = {
									img: that.src,
									gas_num: num
								}
								let pages = getCurrentPages()
								let nowPage = pages[pages.length - 1]
								let prevPage = pages[pages.length - 3]
								prevPage.$vm.obj = obj
								setTimeout(() => {
									uni.navigateBack({
										delta: 2
									})
								}, 1000)
							})
						} else {
							uni.showToast({
								title: dataPath.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			cpimgOk(file) {
				uni.uploadFile({
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						let dataPath = JSON.parse(res.data)
						if (dataPath.code == 1) {
							that.$request.request({
								url: '/Outuser/get_pic_num',
								method: 'POST',
								data: {
									path: dataPath.data.intact_url,
									token: uni.getStorageSync('token')
								}
							}).then(resolt => {
								console.log(resolt, 'resolt');
								if (resolt.data.code == 1) {
									uni.showToast({
										title: resolt.data.msg,
										icon: 'none'
									})
									uni.redirectTo({
										url: 'update_file?imgurl=' + that.networkImg +
											'&gas_num=' + resolt.data.data
									})

								} else {
									uni.showToast({
										title: resolt.data.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			beforeDraw(context, transform) {
				context.setFillStyle('yellow')
				transform.zoom = 2
			},
			afterDraw(ctx, info) {
				// ctx.fillText('我是一行文字水印', 20, 20)
				console.log(`当前画布大小：${info.width}*${info.height}`)
			},
			cropped(imagePath, imageInfo) {
				console.log(imagePath, imageInfo)
				this.tailoringImg = imagePath
			}
		}
	}
</script>

<style lang="less">
	page {
		/* #ifdef MP-ALIPAY */
		position: absolute;
		width: 100%;
		/* #endif */
		height: 100%;
		border: 1px solid red;
		box-sizing: border-box;
	}

	.container {
		height: 100%;
	}

	.cropper-wrap {
		height: calc(100% - 96rpx);
	}
</style>
